export interface MdcCase {
  title?: string,
  desc?: string,
  bottomDesc?: string,
  content?: string,
  html: string,
  index: number,
  expand: boolean,
  space?: boolean,
}

/*
:::case
title:按钮组：禁用只读
space:true
```html
<template>
<pl-button-group disabled>
    <pl-button label="丛林" @click="log('丛林')"/>
    <pl-button label="山脉" @click="log('山脉')"/>
    <pl-button label="火山" @click="log('火山')"/>
</pl-button-group>
<pl-button-group readonly>
    <pl-button label="丛林" @click="log('丛林')"/>
    <pl-button label="山脉" @click="log('山脉')"/>
    <pl-button label="火山" @click="log('火山')"/>
</pl-button-group>
</template>
```
:::
*/
export function processCaseString(caseString: string, index?: number): MdcCase {

  const ret: MdcCase = {
    title: '',
    desc: '',
    content: '',
    html: '',
    index: index!,
    expand: false,
  }

  /*---------------------------------------title-------------------------------------------*/
  //title:按钮组：禁用只读
  let match = caseString.match(/title(?::|：)(.*)/) //：中文的冒号也兼容
  if (!!match) {
    ret.title = match[1] //按钮组：禁用只读 //因为第一个分组我们只是匹配不捕获, 故这里的1其实是第二个分组(match的第0个是匹配的子字符串)
    caseString = caseString.replace(match[0], '').trim() //title:按钮组：禁用只读
  }

  /*---------------------------------------inlineSpace-------------------------------------------*/
  //示例组件之间是否要有间距
  //space:true
  match = caseString.match(/(?<!.)space(?::|：)(.*)/)
  if (!!match) {
    ret.space = match[1] === 'true'
    caseString = caseString.replace(match[0], '').trim()
  }

  /*---------------------------------------expand-------------------------------------------*/
  //示例代码是否主动展开
  //expand:true
  match = caseString.match(/expand(?::|：)(.*)/)
  if (!!match) {
    ret.expand = match[1] === 'true'
    caseString = caseString.replace(match[0], '').trim()
  }

  /*---------------------------------------desc-------------------------------------------*/
  //desc:当按钮组设置模式、禁用的时候，按钮会自动继承按钮组的属性
  //or 像↓这种多行的
  //<desc>
  //  - 展开列的内容只渲染一次；
  //  - 展开列内容不会给固定列分割；
  //</desc>
  match = caseString.match(/<desc>((?:.|\r|\n|\t)*)<\/desc>/)
  if (!!match) {
    ret.desc = match[1].trim()
    caseString = caseString.replace(match[0], '').trim()
  } else {
    match = caseString.match(/desc(?::|：)(.*)/)
    if (!!match) {
      ret.desc = match[1].trim()
      caseString = caseString.replace(match[0], '').trim()
    }
  }

  /*---------------------------------------bottomDesc-------------------------------------------*/
  //todo 感觉没撒必要
  match = caseString.match(/<bottomDesc>((?:.|\r|\n|\t)*)<\/bottomDesc>/)
  if (!!match) {
    ret.bottomDesc = match[1].trim()
    caseString = caseString.replace(match[0], '').trim()
  } else {
    match = caseString.match(/bottomDesc(?::|：)(.*)/)
    if (!!match) {
      ret.bottomDesc = match[1].trim()
      caseString = caseString.replace(match[0], '').trim()
    }
  }

  /*---------------------------------------html-------------------------------------------*/
  //要展示的示例代码, 也会在mdc-case中传递给 processHtmlString, 解析成真正的组件进行展示
  match = caseString.match(/```html((?:.|\s)*?)```/)
  if (!!match) {
    ret.html = match[1].trim()
    caseString = caseString.replace(match[0], '').trim()
  }

  ret.content = caseString.trim()

  return ret
}

export const MATCH_CASE_STRING = /:::case((?:.|\s)*?):::/g
